//import QtQuick 1.0
//import QtQuick.Window 1.0
//import QtQuick.Controls 6.3
//import QtQuick.Layouts 6.3
// import QtQuick.Controls.Windows 6.0
import QtQuick 2.15
import QtQuick.Controls 2.15
 
Rectangle {
    id:root
    color: "yellow"
    radius:10
    //背景图
    Image {
        id:background_image
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop
        source: "http://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
        antialiasing: true
    }
    //文本展示框
    Text {
        id: text1
        //用于python获取此对象
        objectName:"text1"
        x: 300
        y: 20
        width: 200
        height: 34
        text: qsTr(obj)
        font.pixelSize: 12
    }
 
    //一：通过JavaScript控制UI逻辑
    Button {
        id: button
        x: 125
        y: 179
        width: 125
        height: 29
        text: qsTr("调用JavaScript方法")
        //点击事件
        onClicked: {
            change()
        }
        //JavaScript函数
        function change(){
            var date = new Date();
            text1.text=qsTr(date.getFullYear()+"年"+(date.getMonth() + 1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒")
        }
    }
 
    //二：通过Python控制UI逻辑（不推荐，因为要做UI与业务逻辑分离；槽函数相当于于ajax请求来获取数据，而不是去控制UI本身）
    Button {
        id: button1
        x: 325
        y: 179
        width: 125
        height: 29
        text: qsTr("调用Python设置属性")
        //点击事件
        onClicked: {
            //调用注入的槽函数,使用槽函数改变视图
            slots.set_text_msg("小小改变")
        }
    }
 
    //三：通过Python获取数据，JavaScript渲染UI（推荐方式）
    Button {
        id: button2
        x: 525
        y: 179
        width: 125
        height: 29
        text: qsTr("调用Python获取数据")
        //点击事件
        onClicked: {
            //调用注入的槽函数,使用槽函数获取数据
            var msg=slots.get_text_msg()
            var msg=slots.gettime("")
            //利用JS进行渲染
            text1.text=qsTr(msg)
        }
    }
 
}